<template>
  <view class="container">
    <view
      class="panel"
      :style="{ transform: `translateX(${translateX}rpx)` }"
	  :class="{selectedStyle:props.selected,unselectedStyle:!props.selected}"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
    >
      <slot></slot>
    </view>
    <view class="actions" v-show="isSlid">
      <button @click="deletefunc(aimid,currectpage)" class="delete">
		  <image src="../../static/错误.png" mode="aspectFit" class="icon"></image>
	  </button>
	  <button @click="donefunc(aimid,currectpage)">
		  <image src="../../static/勾勾.png" mode="aspectFit" class="icon"></image>
	  </button>
    </view>
  </view>
</template>
 
<script setup>
import db from '../../util/db';
import { ref,defineEmits,defineProps } from 'vue';
//删除和完成相关内容
const props = defineProps({
	aimid:{
		type:Number,
		default(){
			return 1;
		},
	},
	currectpage:{
		type:Number,
		default(){
			return 0;
		},
	},
	selected:{
		type:Boolean,
		default(){
			return false;
		},
	},
})
const emit = defineEmits(["delete"]);
// 定义完成函数内容
async function donefunc(aid,currectpage)
{
	plus.nativeUI.confirm("确定要完成事件吗？",async function(e){
		if(e.index == 0)
		{
			console.log(aid);
			await db.openDatabase();
			console.log("执行到delete");
			await db.addDoneEvent(aid);
			await db.closeDatabase();
			if(currectpage != 0)	
			{
				uni.navigateBack();
			}
			emit('delete', { someData: 'Hello, Vue 3!' });
			console.log("-------------",e);
		}
		else{
			return;
		}
	});
}
async function deletefunc(aid,currectpage)
{
	plus.nativeUI.confirm("确定要删除事件吗？",async function(e){
		if(e.index == 0)
		{
			console.log(aid);
			await db.openDatabase();
			console.log("执行到delete");
			await db.deleteEvent(aid);
			await db.closeDatabase();
			if(currectpage != 0)	
			{
				uni.navigateBack();
			}
			emit('delete', { someData: 'Hello, Vue 3!' });
			console.log("-------------",e);
		}
		else{
			return;
		}
	});
}
//滑动相关内容
const translateX = ref(0);
const isSlid = ref(false);
const startX = ref(0);
const maxTranslateX = 200; // 滑动后固定显示的偏移量，与按钮宽度一致
const threshold = 100; // 滑动阈值
 
// 触摸开始事件处理
const handleTouchStart = (event) => {
  startX.value = event.touches[0].clientX;
};

// 触摸移动事件处理
const handleTouchMove = (event) => {
  const currentX = event.touches[0].clientX;
  const diffX = currentX - startX.value;
  translateX.value = Math.min(0, diffX);
  isSlid.value = diffX < -threshold;
};

// 触摸结束事件处理
const handleTouchEnd = () => {
  if (translateX.value < -threshold - 50) {
    translateX.value = -maxTranslateX;
  } else {
    translateX.value = 0;
    isSlid.value = false;
  }
};

</script>
 
<style scoped>
.selectedStyle{
	background-color: rgb(243, 243, 243);
}
.unselectedStyle{
	background-color: white;
}
.delete{
	background-color: red;
}
.container {
  position: relative;
  overflow: hidden;
}
 
.panel {
  width: 750rpx;
  height: 120rpx;
/*  background-color: white; */
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.actions {
  background-color:rgb(229, 234, 247) ;
  position: absolute;
  top: 0;
  right: 0;
  width: 200rpx; /* 与 maxTranslateX 一致 */
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: white;
}

@keyframes larger{
	from{
		transform: scale(0,0);
	}
	to{
		transform: scale(1,1);
	}	
}

button {
  height: 100%;
  width: 100rpx;
  background-color: #007aff;
  color: white;
  border: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  animation: larger 0.8s ease 1 forwards;
  border-radius: 0%;
}
.txt{
	color: white;
	font-size: 30rpx;
	font-weight: 500;
	height: 40rpx;
}
.icon{
	width: 120rpx;
	height: 120rpx;
}
</style>